<template>
  <div class="public">
    <div v-if="$route.path=='/activity/public'">
      <a-card :bordered="false" style="border-radius:8px">
        <div class="flex row_bet">
          <div class="card_title">
            效果统计
          </div>
          <a-range-picker
            :ranges="{
              本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
              上周: [
                moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
                moment().subtract(parseInt(moment().format('d')), 'days')
              ],
              本月: [
                moment()
                  .month(moment().month())
                  .startOf('month'),
                moment()
                  .month(moment().month())
                  .endOf('month')
              ],
              上月: [
                moment(
                  moment()
                    .subtract(1, 'month')
                    .format('YYYY-MM') + '-01'
                ),
                moment(
                  moment()
                    .subtract(1, 'month')
                    .format('YYYY-MM') + '-01'
                )
                  .subtract(-1, 'month')
                  .add(-1, 'days')
              ],
              半年: [
                moment()
                  .startOf('day')
                  .subtract(6, 'month'),
                moment()
              ]
            }"
            format="YYYY/MM/DD"
            @change="severChange"
            style="width:250px"
          >
            <div>
              <a-icon type="calendar"/>
              <span class="m_l_10 m_r_10">{{ severstr }}</span>
              <a-icon type="down" style="font-size:12px"/>
            </div>
          </a-range-picker>
        </div>
        <div class="header_box">
          <div class="header-info">
            <div class="title">付款金额</div>
            <div class="datainfo">
              <countTo
                :startVal="startVal"
                :decimals="2"
                :endVal="service.is_alipayFee == null ? 0 : parseFloat(service.is_alipayFee)"
                :duration="3000"
              >
              </countTo>
            </div>
          </div>

          <div class="header-info">
            <div class="title">付款服务费</div>
            <div class="datainfo">
              <countTo
                :startVal="startVal"
                :decimals="2"
                :endVal="service.is_serviceFee == null ? 0 : parseFloat(service.is_serviceFee)"
                :duration="3000"
              >
              </countTo>
            </div>
          </div>

          <div class="header-info">
            <div class="title">结算金额</div>
            <div class="datainfo">
              <countTo
                :startVal="startVal"
                :decimals="2"
                :endVal="service.is_realPayFee == null ? 0 : parseFloat(service.is_realPayFee)"
                :duration="3000"
              >
              </countTo>
            </div>
          </div>

          <div class="header-info">
            <div class="title">结算服务费</div>
            <div class="datainfo">
              <countTo
                :startVal="startVal"
                :decimals="2"
                :endVal="service.is_preFinishServiceFee == null ? 0 : parseFloat(service.is_preFinishServiceFee)"
                :duration="3000"
              >
              </countTo>
            </div>
          </div>

          <div class="header-info">
            <div class="title">推广商品数</div>
            <div class="datainfo">
              <countTo :startVal="startVal" :decimals="0" :endVal="service.count" :duration="3000"></countTo>
            </div>
          </div>
        </div>
      </a-card>
      <a-card :bordered="false" style="border-radius:8px;margin-top:10px;">
        <div class="groupbox">
          <a-radio-group v-model="activityradio" @change="groupChange">
            <a-radio :value="1">
              活动列表
            </a-radio>
            <a-radio :value="2">
              推广效果
            </a-radio>
          </a-radio-group>
        </div>

        <div class="">
          <div v-if="activityradio == 1">
            <div class="flex row_bet col_center" style="margin-bottom: 15px;">
              <div class="h24">
                <a-radio-group
                  class="br4"
                  style="margin-top:10px;margin-left: 10px;"
                  v-model="status"
                  @change="statusChange">
                  <a-radio-button :value="1">
                    在线活动
                  </a-radio-button>
                  <a-radio-button :value="2">
                    到期活动
                  </a-radio-button>
                </a-radio-group>
                <a-radio-group
                  class="br4"
                  style="margin-top:10px;margin-left: 10px;"
                  v-model="sceneId"
                  @change="sceneIdChange">
                  <a-radio-button value="">
                    所有类型
                  </a-radio-button>
                  <a-radio-button :value="6">
                    普通招商
                  </a-radio-button>
                  <a-radio-button :value="8">
                    内容招商
                  </a-radio-button>
                  <a-radio-button :value="12">
                    品牌快抢
                  </a-radio-button>
                  <a-radio-button :value="10">
                    自营货品
                  </a-radio-button>
                </a-radio-group>
              </div>

              <a-input-search
                placeholder="活动id / 标题"
                style="width: 230px"
                class="br4"
                allowClear
                v-model="search"
                @search="onSearch"
              />
            </div>
            <div class="activitytable">
              <a-table
                :columns="columns"
                :rowKey="activity => activity.eventId"
                :dataSource="activity"
                :loading="loading"
                @change="handleTableChange"
                :pagination="pagination"
              >
                <div slot="sceneId" slot-scope="row">
                  <div class="flex col_center">
                    <span
                      :style="{
                        color:row.sceneId === 6 ? '#96989B' : row.sceneId === 8 ? '#2396F9': row.sceneId === 12 ?'#39C15B' : ''
                      }">[{{ row.sceneId === 6 ? '普通招商' : row.sceneId === 8 ? '内容招商': row.sceneId === 12 ?'品牌快抢' : '' }}]
                    </span>
                    <span class="ml5">  {{ row.title }}</span>
                  </div>
                </div>
                <div slot="active" slot-scope="row">
                  <a-button type="link" @click="docopy(row.eventId)">链接</a-button>
                  <a-button type="link" @click="goaudit(row)">审核</a-button>
                </div>
              </a-table>
            </div>
          </div>
          <div v-else>
            <div class="flex row_right col_center flex_wrap" style="margin-bottom: 10px;">
              <div class="flex row_left col_center flex_wrap">
                <div style="margin-bottom: 5px">
                  <span class="p_l_10">
                    日期：
                  </span>
                  <a-range-picker
                    :ranges="{
                      本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
                      上周: [
                        moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
                        moment().subtract(parseInt(moment().format('d')), 'days')
                      ],
                      本月: [
                        moment()
                          .month(moment().month())
                          .startOf('month'),
                        moment()
                          .month(moment().month())
                          .endOf('month')
                      ],
                      上月: [
                        moment(
                          moment()
                            .subtract(1, 'month')
                            .format('YYYY-MM') + '-01'
                        ),
                        moment(
                          moment()
                            .subtract(1, 'month')
                            .format('YYYY-MM') + '-01'
                        )
                          .subtract(-1, 'month')
                          .add(-1, 'days')
                      ],
                      半年: [
                        moment()
                          .startOf('day')
                          .subtract(6, 'month'),
                        moment()
                      ]
                    }"
                    format="YYYY-MM-DD"
                    @change="passChange"
                    style="width:230px"
                  >
                  </a-range-picker>
                </div>
                <div style="margin-bottom: 5px">
                  <span class="p_l_10">
                    关键词：
                  </span>
                  <a-input v-model="passsearch" class="br4" style="width:200px" placeholder="标题/商品ID/店铺名"/>
                </div>
                <div style="margin-bottom: 5px">
                  <a-button type="primary" :loading="searchloading" class="m_r_10 m_l_10 br4" @click="dopasssearch">
                    搜索
                  </a-button>
                  <a-button class="br4" @click="exportToExcel">导出</a-button>
                </div>
              </div>

            </div>
            <div>
              <a-table
                :columns="columns2"
                :rowKey="activity2 => activity2.id"
                :dataSource="activity2"
                :loading="loading2"
                @change="handleTableChange2"
                :pagination="pagination2"
              >
                <div slot="pictUrl" slot-scope="text, row">
                  <div class="goodsinfo">
                    <img
                      :src="row.pictUrl"
                      alt=""
                      srcset=""
                      style="width:77px;height:77px;margin-right:15px;border-radius: 8px;"
                    />
                    <div class="info-right">
                      <div>{{ row.title }}</div>
                      <div class="flex row_bet" style="margin:8px 0;">
                        <span>￥{{ row.zkFinalPrice }}</span>
                        <div>
                          <span class="p_r_10"> 券后价 ￥{{ row.couponZkFinalPrice }}</span>
                          <span> 销量{{ row.biz30day }}</span>
                        </div>
                      </div>
                      <div>店铺:{{ row.shopTitle }}</div>
                    </div>
                  </div>
                </div>
                <div slot="startTime" slot-scope="text, row">
                  <div>起:{{ row.startTime }}</div>
                  <div>止:{{ row.endTime }}</div>
                </div>
                <div slot="commissionRate" slot-scope="text, row">
                  <div>{{ row.commissionRate }}%</div>
                </div>
              </a-table>
            </div>
          </div>
        </div>
      </a-card>
    </div>
    <router-view v-else></router-view>
  </div>
</template>

<script>
  import moment from 'moment'
  import countTo from 'vue-count-to'
  import { getactivitydata, getactivityList, getadoptgoods } from '@/api/activityApi'
  import { exportExcel } from '@/assets/js/Export2Excel'

  export default {
    name: 'Public',
    components: {
      countTo
    },
    data () {
      return {
        moment,
        startVal: 0,
        endVal: 2017,
        sceneId: '',
        service: {
          is_alipayFee: 0, // 付款金额
          is_serviceFee: 0, // 付款服务费
          is_realPayFee: 0, // 结算金额
          is_preFinishServiceFee: 0, // 结算服务费
          count: 0 // 商品数
        },
        activityradio: 1,
        status: 1,
        search: '',
        columns: [
          {
            title: '活动标题',
            align: 'left',
            scopedSlots: {
              customRender: 'sceneId'
            }
          },
          {
            title: '活动ID',
            // width: 150,
            align: 'center',
            dataIndex: 'eventId',
            scopedSlots: {
              customRender: 'eventId'
            }
          },
          {
            title: '开始时间',
            align: 'center',
            dataIndex: 'saveTime',
            scopedSlots: {
              customRender: 'saveTime'
            }
          },
          {
            title: '结束时间',
            align: 'center',
            // width: 500,
            dataIndex: 'endTime',
            scopedSlots: {
              customRender: 'endTime'
            }
          },
          {
            title: '活动总付款',
            align: 'center',
            dataIndex: 'price',
            scopedSlots: {
              customRender: 'price'
            }
          },
          {
            title: '团长账号',
            align: 'center',
            dataIndex: 'cpName',
            scopedSlots: {
              customRender: 'cpName'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }
        ],
        columns2: [
          {
            title: '商品信息',
            align: 'center',
            width: 400,
            dataIndex: 'pictUrl',
            scopedSlots: {
              customRender: 'pictUrl'
            }
          },
          {
            title: '活动id',
            // width: 150,
            align: 'center',
            dataIndex: 'eventId',
            scopedSlots: {
              customRender: 'eventId'
            }
          },
          {
            title: '排期时间',
            align: 'center',
            dataIndex: 'startTime',
            scopedSlots: {
              customRender: 'startTime'
            }
          },
          {
            title: '佣金比例',
            align: 'center',
            // width: 500,
            dataIndex: 'commissionRate',
            scopedSlots: {
              customRender: 'commissionRate'
            }
          },
          {
            title: '服务费率',
            align: 'center',
            dataIndex: 'serviceRate',
            scopedSlots: {
              customRender: 'serviceRate'
            }
          },
          {
            title: '订单数',
            align: 'center',
            dataIndex: 'order_count',
            scopedSlots: {
              customRender: 'order_count'
            }
          },
          {
            title: '付款金额',
            align: 'center',
            dataIndex: 'is_alipayFee',
            scopedSlots: {
              customRender: 'is_alipayFee'
            }
          },
          {
            title: '预估服务费',
            align: 'center',
            dataIndex: 'is_serviceFee',
            scopedSlots: {
              customRender: 'is_serviceFee'
            }
          },
          {
            title: '结算金额',
            align: 'center',
            dataIndex: 'new',
            scopedSlots: {
              customRender: 'new'
            }
          },
          {
            title: '结算服务费',
            align: 'center',
            dataIndex: 'itemId',
            scopedSlots: {
              customRender: 'itemId'
            }
          }
        ],
        activity: [],
        activity2: [
          // {
          //   id: 1338, // 自增id
          //   title: '哈哈哈',
          //   itemId: '562671013027', // 商品id
          //   pictUrl: '//img.alicdn.com/bao/uploaded/i4/899560653/TB2NUVfqFGWBuNjy0FbXXb4sXXa_!!899560653.jpg', // 商品图
          //   zkFinalPrice: '198.00', // 原价
          //   couponZkFinalPrice: '198.00', // 卷后价
          //   biz30day: 0, // 30//天销量
          //   shopTitle: '卓梵 阿玛尼璐璐专柜', // 店铺名称
          //   startTime: '2019-07-25', // 开始时间
          //   endTime: '2019-08-21', // 开始时间
          //   commissionRate: '30.1', // 佣金比例
          //   serviceRate: '2', // 服务费
          //   couponInfo: null, // 优惠卷信息
          //   eventId: '339512289', // 活动id
          //   new: '0', // 商品最新佣金
          //   is_alipayFee: '0.00', // 付款金额
          //   is_serviceFee: '0.00', // 预估服务费
          //   order_count: 1 // 订单数
          // }
        ],
        loading: false,
        loading2: false,
        passsearch: '',
        passstart: '',
        passend: '',
        pagination: {
          pageSize: 15,
          page: 1
        },
        pagination2: {
          pageSize: 15,
          page: 1
        },
        severstr:
          moment()
            .month(moment().month())
            .startOf('month')
            .format('YYYY/MM/DD') +
          ' 至 ' +
          moment().format('YYYY/MM/DD'),
        pass:
          moment()
            .month(moment().month())
            .startOf('month')
            .format('YYYY/MM/DD') +
          ' 至 ' +
          moment().format('YYYY/MM/DD'),
        searchloading: false
      }
    },

    computed: {},
    created () {
      this.getacticity(1, 15, 1, 1)
      const starttime = moment()
        .month(moment().month())
        .startOf('month')
        .unix()
      const endtime = moment()
        .month(moment().month())
        .endOf('month')
        .unix()
      this.passstart = starttime
      this.passend = endtime
      this.getactivitydata(starttime, endtime)
    },
    mounted () {
    },
    methods: {
      exportToExcel () {
        // excel表格数据导出
        require.ensure([], () => {
          const tHeader = ['商品ID', '原价', '券后价', '30天销量', '店铺名称', '开始时间', '结束时间',
            '佣金比例', '服务费', '最新佣金', '付款金额', '预估服务费', '订单数']// Excel的表格第一行的标题
          const filterVal = ['itemId', 'zkFinalPrice', 'couponZkFinalPrice', 'biz30day', 'shopTitle', 'startTime',
            'endTime', 'commissionRate', 'serviceRate', 'new', 'is_alipayFee', 'is_serviceFee', 'order_count'
          ]// 跟上面标题一一对应的字段
          const list = this.activity2 // 表格绑定的数组数据 即要导出的数据
          // console.log(list)
          const excelName = '推广效果数据'// 报表名称
          const data = this.formatJson(filterVal, list)
          exportExcel(tHeader, data, excelName)
        })
      },
      formatJson (filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      dopasssearch () {
        // console.log(this.passsearch)
        if (this.passsearch !== '') {
          this.searchloading = true
          this.getadoptgoods(1, 15, this.passstart, this.passend, this.passsearch)
        }
      },
      // 推广效果
      getadoptgoods (page, pagesize, start, end, search) {
        this.loading2 = true
        getadoptgoods({
          page: page,
          pagesize: pagesize,
          start_time: start,
          end_time: end,
          search: search
          // type: 2,
          // activity_type: 2
        })
          .then(res => {
            // console.log(res)
            this.searchloading = false
            this.activity2 = res.data.data.data
            const pagination = {
              ...this.pagination2
            }
            pagination.total = res.data.data.count
            this.pagination2 = pagination
            this.loading2 = false
          })
          .catch(err => {
            console.log(err)
            this.loading2 = false
          })
      },
      goaudit (row) {
        this.$store.dispatch('setRowsname', row)
        this.$router.push({
          path: '/activity/public/audit'
        })
      },
      docopy (id) {
        const that = this
        const str = 'http://ad.alimama.com/zhaoshang/cpevent/index.htm?srcCode=1&keyword=' + id
        this.$copyText(str).then(
          function (e) {
            // console.log(e)
            that.$success({
              title: '链接复制成功',
              content: str
            })
          },
          function (e) {
            console.log(e)
          }
        )
      },
      getactivitydata (start, end) {
        getactivitydata({
          start: start,
          end: end
        })
          .then(res => {
            // console.log(res)
            this.service = res.data
          })
          .catch(err => {
            console.log(err)
          })
      },
      getacticity (page, pagesize, type, status, search) {
        this.loading = true
        getactivityList({
          page: page,
          pagesize: pagesize,
          type: type, // 1=共用活动  2=我的活动
          status: status, // 1有效活动 2失效活动 不传默认有效活动,
          sceneId: this.sceneId, // 6普通招商 8内容招商 12品牌快抢
          search: search
        })
          .then(res => {
            // console.log(res)
            this.activity = res.data.data
            //  this.count = res.data.count
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination = pagination
            this.loading = false
          })
          .catch(err => {
            console.log(err)
          })
      },
      handleTableChange2 (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination2
        }
        pager.current = pagination.current
        this.pagination2 = pager
        this.fetch2({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch2 (params = {}) {
        // console.log('params:', params)
        this.loading2 = true
        this.getadoptgoods(params.page, 15, this.passstart, this.passend, this.passsearch)
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getacticity(params.page, 15, 1, 2)
      },
      onSearch (value) {
        // console.log(value)
        if (value !== '') {
          this.getacticity(1, 15, 1, this.status, value)
        }
      },
      statusChange (e) {
        // console.log(this.status)
        this.getacticity(1, 15, 1, this.status, this.search)
      },
      sceneIdChange (e) {
        // console.log(this.sceneId)
        this.getacticity(1, 15, 1, this.status, this.search)
      },
      groupChange (e) {
        // console.log('radio checked', e.target.value)
        if (e.target.value === 1) {
          this.getacticity(1, 15, 1, this.status, this.search)
        } else {
          this.getadoptgoods(1, 15, this.passstart, this.passend, this.passsearch)
        }
      },
      severChange (dates, dateStrings) {
        // console.log('From: ', dates[0], ', to: ', dates[1])
        // console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
        this.getactivitydata(dates[0].unix(), dates[1].unix())
        const str = dateStrings[0] + '至' + dateStrings[1]
        // str = str.substring(5, 7)
        this.severstr = str
      },
      passChange (dates, dateStrings) {
        // console.log('From: ', dates[0], ', to: ', dates[1])
        // console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
        this.passstart = dates[0].format('YYYY-MM-DD')
        this.passend = dates[1].format('YYYY-MM-DD')
        this.getadoptgoods(1, 15, dates[0].format('YYYY-MM-DD'), dates[1].format('YYYY-MM-DD'), this.passsearch)
        const str = dateStrings[0] + '至' + dateStrings[1]
        this.pass = str
      }
    }
  }
</script>

<style lang="less" scoped>
  .public {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      margin-bottom: 15px;
      font-weight: 600;
    }

    .header_box {
      min-height: 101px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      .header-info {
        margin-right: 10px;

        .title {
          color: rgba(16, 16, 16, 0.7);
          font-size: 12px;
        }

        .datainfo {
          font-size: 28px;
          color: #101010;
          font-weight: 600;
        }
      }
    }

    .groupbox {
      margin-bottom: 15px;
      margin-top: 10px;

      /deep/ .ant-radio-wrapper {
        color: #96989b;
        font-weight: 600;
      }

      /deep/ .ant-radio {
        display: none;
      }

      /deep/ .ant-radio-wrapper-checked {
        font-weight: 600;
        color: #101010;
      }

    }

    /deep/ .ant-input {
      border-radius: 4px;
    }

    .goodsinfo {
      display: flex;

      .info-right {
        width: 300px;
        height: 100%;
        text-align: left;
      }
    }

    .h24 {
      /deep/ .ant-radio-button-wrapper {
        height: 24px;
        line-height: 22px;
      }
    }
  }
</style>
